<template>
    <div class="me-page">
      <NavBar title="我的 ME" />
      
      <div class="login-area" @click="goToLogin">
        <span>点击登陆</span>
        <span>CLICK ON LANDING</span>
        <div class="avatar">👤</div>
      </div>
      
      <div class="menu-list">
        <div class="menu-item" @click="goToNotification">
          <div class="icon">✉️</div>
          <div class="text">
            <div>通知中心</div>
            <div>NOTICE</div>
          </div>
          <div class="arrow">›</div>
        </div>
        
        <div class="menu-item">
          <div class="icon">💬</div>
          <div class="text">
            <div>我要留言</div>
            <div>LEAVING A MESSAGE.</div>
          </div>
          <div class="arrow">›</div>
        </div>
        
        <div class="menu-item" @click="goToAbout">
          <div class="icon">❗</div>
          <div class="text">
            <div>关于</div>
            <div>ABOUT</div>
          </div>
          <div class="arrow">›</div>
        </div>
      </div>
      
      <BottomNav active="me" />
    </div>
  </template>
  
  <script>
  import NavBar from '~/components/NavBar.vue'
  import BottomNav from '~/components/BottomNav.vue'
  
  export default {
    components: {
      NavBar,
      BottomNav
    },
    methods: {
      goToNotification() {
        this.$router.push('/me/notification')
      },
      goToAbout() {
        this.$router.push('/me/about')
      },
      goToLogin() {
        // 登录逻辑
      }
    }
  }
  </script>
  
  <style scoped>
  .me-page {
    background: #f5f5f5;
    min-height: 100vh;
  }
  
  .login-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 0;
    background: white;
    margin-bottom: 10px;
    position: relative;
  }
  
  .login-area span:first-child {
    font-size: 16px;
    margin-bottom: 5px;
  }
  
  .login-area span:last-child {
    font-size: 12px;
    color: #999;
  }
  
  .avatar {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: #1E90FF;
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
  }
  
  .menu-list {
    background: white;
  }
  
  .menu-item {
    display: flex;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #eee;
  }
  
  .icon {
    margin-right: 15px;
    font-size: 20px;
  }
  
  .text {
    flex: 1;
  }
  
  .text div:first-child {
    font-size: 16px;
    margin-bottom: 3px;
  }
  
  .text div:last-child {
    font-size: 12px;
    color: #999;
  }
  
  .arrow {
    color: #999;
    font-size: 20px;
  }
  </style>